<script setup name="sub-category">
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { computed, onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
const store = useStore();
const router = useRouter();
// 首页-全部分类(包含推荐商品)
store.dispatch('home/updateHomePageList');
const homeCategoryHeadList = computed(() => store.state.home.homepageHeadList);


const isNavShow = ref(false);
onMounted(() => {
  window.addEventListener('scroll', (e) => {
    // 取消默认事件
    e.preventDefault();
    if (window.scrollY > 52) {
      isNavShow.value = true;
    } else {
      isNavShow.value = false;
    }
  });
});
const userName = localStorage.getItem('account');
// console.log(userName);

// 购物车
store.dispatch('cart/updateCart');
const shopping = computed(() => store.state.cart.getShoppingCartList);

// 求count的和
function getCount(shopping) {
  let count = 0;
  shopping.forEach((item) => {
    count += item.count;
  });
  return count;
}


function goHome() {
  router.push({
    path: '/',
  });
}
function goShoppingCart() {
  router.push({
    path: '/cart',
  });
}

</script>

<template>
  <div class="container">
    <!-- 吸顶 -->
    <div :class="isNavShow ? 'on-scroll scorll' : 'scorll' ">
      <div class="scroll-wrapper el-container">
        <a href="#/" class="scroll-logo">
          <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="" />
        </a>
        <div class="scroll-nav">
          <a class="down-text" @click="goHome">首页</a>
          <a v-for="item of homeCategoryHeadList" :key="item.id" class="down-text" >
            <router-link :to="{
              name: '分类',
              params: {
                id: item.id,
              },
            }">
              {{ item.name }}
            </router-link>
          </a>
        </div>
        <span>
          |
        </span>
        <div class="scroll-other">
          <a href="#">品牌</a>
          <a href="#">专题</a>
        </div>

      </div>

    </div>
    <div class="headers-nav">
      <div class="header-text el-container">
        <ul class="text-content">
          <li>
            <a href="">
              <el-icon class="icon" color="#000" style="vertical-align: -10%;">
                <User />
              </el-icon>
              {{ userName }}
            </a>
          </li>
          <li>
            <a href="">
              {{ userName ? '退出登录' : '免费注册' }}
            </a>
          </li>
          <li>
            <a href="">我的订单</a>
          </li>
          <li>
            <a href="">会员中心</a>
          </li>
          <li>
            <a href="">帮助中心</a>
          </li>
          <li>
            <a href="">关于我们</a>
          </li>
          <li>
            <a href="">
              <el-icon class="icon" color="#000" style="vertical-align: -10%;">
                <Iphone />
              </el-icon>手机版
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="down">
      <div class="down-box el-container">
        <div class="down-img">
          <a href="#" class="login"></a>
        </div>
        <div class="down">
          <a class="down-text" @click="goHome">首页</a>
          <a
            v-for="item of homeCategoryHeadList"
            :key="item.id"
            class="down-text"
          >
            <router-link :to="{
              name: '分类',
              params: {
                id: item.id,
              },
            }">
              <span class="hover">{{ item.name }}</span>
            </router-link>
            <!-- 下拉菜单 -->
            <ul class="category">
              <li v-for="item of item.children" :key="item.id">
                <router-link :to="{
                  name: '二级分类',
                  params: {
                    id: item.id,
                  },
                }">
                  <a href="#">
                    <img :src="item.picture" style="width: 60px;height:60px;">
                  </a>
                  <p>{{ item.name }}</p>
                </router-link>
              </li>
            </ul>
          </a>
        </div>
        <div class="down-icon">
          <el-icon>
            <Search />
          </el-icon>
          <input placeholder="搜一搜" class="down-int">
        </div>
        <div class="down-nai-shopping">
          <el-badge
            :value="getCount(shopping)"
            class="item"
            @click="goShoppingCart"
          >
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon>
                  <ShoppingCart />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu v-for="item of shopping" :key="item.id">
                  <el-dropdown-item @click="goShoppingCart">
                    {{ item.name }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-badge>
        </div>
      </div>
    </div>
    <router-view :key="$route.fullPath"/>
  </div>
</template>

<style lang="scss" scoped>
.container {
  .hover {
    &:hover {
      color: $green;
    }
  }

  .on-scroll {
    transition: all .3s linear;
    opacity: 1 !important;
    transform: none !important;
  }

  .scorll {
    opacity: 0;
    transform: translateY(-100%);
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    background-color: #fff;
    z-index: 100;

    .scroll-wrapper {
      display: flex;
      align-items: center;

      span {
        color: $green;
      }

      .scroll-logo {
        width: 200px;
        height: 80px;

        img {
          width: 100%;
        }
      }

      .scroll-nav {
        display: flex;
        padding-left: 40px;

        a {
          display: block;
          color: #333;
          height: 32px;
          width: 32px;
          line-height: 32px;
          margin-right: 40px;
          font-size: 16px;
          cursor: pointer;

          &:hover {
            box-sizing: border-box;
            border-bottom: 1px down $green;
            color: $green;
          }
        }
      }

      .scroll-other {
        display: flex;
        padding-left: 40px;
        border-left: 1px down $green;

        a {
          color: #333;
          font-size: 16px;
          margin-right: 40px;

          &:hover {
            color: $green;
          }
        }
      }
    }
  }

  .headers-nav {
    width: 100%;
    background-color: #333333;

    .header-text {
      height: 53px;

      .text-content {
        height: 53px;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        li {
          color: #fff;
          font-size: 14px;
          cursor: pointer;

          &::after {
            content: '|';
            display: inline-block;
            width: 1px;
            height: 13px;
            margin: 0 20px;
            background-color: #333;
          }

          &:last-child::after {
            display: none;
          }

          a {
            display: inline-block;
            color: #dcdcdc;
            font-size: 14px;

            .icon {
              color: #fff;
            }

            color: #fff;

            &:hover {
              color: $green;
            }

            &:hover .icon {
              color: $green;
            }
          }
        }
      }
    }
  }

  .down-box {
    display: flex;
    align-items: center;
    position: relative;

    // 导航栏
    .down {
      display: flex;
      height: 132px;
      padding-left: 40px;
      align-items: center;

      .category {
        z-index: 9999;
        width: 1240px;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 120px;
        overflow: hidden;
        height: 0;
        opacity: 0;
        box-shadow: 0 0 5px #ccc;
        transition: all .2s .1s;
        display: flex;
        padding: 0 70px;
        box-sizing: border-box;
        align-items: center;
        flex-wrap: wrap;
        img{
          margin-left: 30px;
        }

        >li {
          text-align: center;
          width: 110px;

          >a {
            color: #333;

            &:hover {
              color: $green;
            }
          }
        }
      }

      // 分类栏
      >a {
        display: block;
        height: 32px;
        width: 32px;
        line-height: 32px;
        margin-right: 40px;
        color: #333;
        font-size: 16px;

        &:hover {
          border-bottom: 1px solid $green;
          box-sizing: border-box;
          cursor: pointer;
        }

        &:hover .category {
          cursor: default;
          height: 132px;
          opacity: 1;
        }
      }
    }

    .down-img {
      .login {
        background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat 2px/contain;
        display: block;
        width: 200px;
        height: 80px;
        font-size: 0;
      }
    }

    // 文字区
    .down-text {
      margin-right: 40px;
    }

    // 图标输入框
    .down-icon {
      padding-bottom: 0 0 10 10px;
      margin-left: 10px;
      border-bottom: 1px down #e7e7e7;
      display: flex;
      align-items: center;

      .down-int {
        // width: 100px;
        margin-left: 10px;
        border: 1px solid red;
        outline: none;
      }
    }

    // 购物车图片区
    .down-nai-shopping {
      margin-left: 10px;

      el-dropdown-link {
        background-color: red;
      }
      .el-icon{
        font-size: 20px;
      }
    }
  }
}
</style>
